<style>
#surveyList {
	background: #E2EDEF;
	border-radius: 10px;
	margin-left: 30%;
	width: 400px;
	padding: 10px;
}

#surveyRow {
	margin: 0px 0px 10px 0px;
}

#surveyRow a {
	margin: 0px 0px 0px 10px;
	float: right;
}

#surveySize {
	font: bold 13px Arial;
}

#surveyAdd {
	display: inline;
	float: right;
	margin: 0px;
}

#surveyAdd a, .surveyShow {
	background: #54BD06;
	padding: 3px 10px;
	font: normal 12px Arial;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: white !important;
	text-decoration: none;
}

#surveyAdd a:hover, #surveyRow a:hover {
	opacity: .8;
}

.surveyDelete {
	background: #C00;
	padding: 3px 10px;
	font: normal 12px Arial;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	color: white !important;
	text-decoration: none;
}

#object_otherInfo {
	width: 420px;
	padding: 0px;
}
</style>

<script type="text/javascript" >
$(document).ready(function() {
	$('#object_otherInfo').removeAttr('cols');
	
    var deleteSurvey = #{jsAction @Surveys.delete(':id')/}
    $(".surveyDelete").click(function(event) {
        var id = event.target.id;
        $.ajax({
        	url: deleteSurvey({id : id}) + '?x-http-method-override=DELETE',
    	    success:function() {
    	    	location.reload();
    	    },
    	    error:function(request, status, error) {
    	    	alert('Error');
    	    }
    	});
    });
});
</script>

<div id="surveyList">

	#{list items:_surveyList, as:'survey'}
   		<div id="surveyRow">
	   		${survey_index}. &nbsp; ${survey.surveyDate.format()}
   			<a id="&{survey.surveyId}" class="surveyDelete" href="#">&{'delete'}</a>
   			<a href="@{Surveys.show(survey.surveyId)}" class="surveyShow">&{'view'}</a>
   		</div>	
	#{/list}
	
	<div id="surveySize">
	&{_surveyList.isEmpty() ? messages.get('no.surveys') : '<br>' + messages.get('total', _surveyList.size())}
	<p id="surveyAdd">
       	<a href="@{Surveys.blank()}">&{'survey.add'}</a>
  	</p>
	</div>
</div>